<template>
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_15px_rgba(0,0,0,0.1)] z-[1001]">
        <!-- 进度条 - 显示在顶部边框位置 -->
        <div class="relative h-1 bg-gray-200 cursor-pointer group" @click="onProgressBarClick">
            <div
                class="absolute top-0 left-0 h-full bg-blue-500 transition-all duration-100"
                :style="{ width: progressPercentage + '%' }"
            ></div>
            <!-- 进度条滑块 -->
            <div
                class="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-white border-2 border-blue-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-md cursor-pointer"
                :style="{ left: progressPercentage + '%', marginLeft: '-6px' }"
                @mousedown="onProgressHandleMouseDown"
            ></div>
        </div>

        <!-- 播放器主体 -->
        <div class="h-[70px] flex items-center px-4 md:px-6">
            <!-- 左侧：歌曲信息 -->
            <div class="flex-[0_0_240px] md:flex-[0_0_320px] h-full flex items-center gap-3">
                <div v-if="currentSong" class="flex items-center gap-3 flex-1 min-w-0">
                    <div
                        class="relative w-14 h-14 rounded-full shadow-md overflow-hidden cursor-pointer transition-all hover:scale-105 hover:shadow-lg group"
                        @click="emit('toggle-lyrics')"
                        title="点击查看歌词"
                    >
                        <!-- 默认占位符 -->
                        <div
                            v-if="!coverLoaded"
                            class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-[#667eea] to-[#764ba2]"
                        >
                            <CustomerServiceOutlined class="text-2xl text-white opacity-90" />
                        </div>
                        <!-- 封面图片 -->
                        <img
                            v-show="coverLoaded"
                            :src="currentSong.cover"
                            :alt="currentSong.name"
                            class="w-full h-full object-cover"
                            @load="onCoverLoad"
                            @error="onCoverError"
                        />
                        <!-- 悬浮提示图标 -->
                        <div
                            class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                        >
                            <BookOutlined class="text-xl text-white" />
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-gray-900 font-medium text-sm truncate mb-0.5">{{ currentSong.name }}</div>
                        <div class="text-gray-500 text-xs truncate">{{ currentSong.artist }}</div>
                    </div>
                    <div class="hidden md:flex items-center gap-3 text-gray-500">
                        <HeartOutlined
                            class="text-base cursor-pointer transition-all hover:text-blue-500 hover:scale-110"
                        />
                        <span class="text-xs">999</span>
                        <MessageOutlined
                            class="text-base cursor-pointer transition-all hover:text-blue-500 hover:scale-110"
                        />
                        <span class="text-xs">305</span>
                    </div>
                </div>
                <div v-else class="text-gray-500 text-sm">暂无播放</div>
            </div>

            <!-- 中间：播放控制 -->
            <div class="flex-1 h-full flex items-center justify-center px-4 md:px-8">
                <div class="flex items-center gap-4 md:gap-8">
                    <RetweetOutlined
                        :class="[
                            'text-xl cursor-pointer transition-all hidden sm:block',
                            playMode === 'loop' ? 'text-blue-500' : 'text-gray-600 hover:text-gray-900',
                        ]"
                        @click="emit('toggle-mode')"
                    />
                    <StepBackwardOutlined
                        class="text-2xl text-gray-700 cursor-pointer transition-all hover:text-gray-900 hover:scale-110"
                        @click="emit('previous')"
                    />
                    <div
                        class="w-11 h-11 rounded-full flex items-center justify-center cursor-pointer transition-all hover:scale-105 shadow-md"
                        @click="emit('toggle-play')"
                    >
                        <PauseCircleFilled v-if="isPlaying" class="text-[26px] text-white" />
                        <PlayCircleFilled v-else class="text-[26px] text-white" />
                    </div>
                    <StepForwardOutlined
                        class="text-2xl text-gray-700 cursor-pointer transition-all hover:text-gray-900 hover:scale-110"
                        @click="emit('next')"
                    />
                    <UnorderedListOutlined
                        class="text-xl text-gray-600 cursor-pointer transition-all hover:text-gray-900 hidden sm:block"
                        @click="emit('toggle-drawer')"
                    />
                </div>
            </div>

            <!-- 右侧：时间和功能 -->
            <div class="flex-[0_0_180px] md:flex-[0_0_280px] h-full flex items-center gap-3 md:gap-4 justify-end">
                <!-- 时间显示 -->
                <div class="text-gray-500 text-xs hidden md:block">
                    <span>{{ formatDuration(currentTime) }}</span>
                    <span class="mx-1">/</span>
                    <span>{{ formatDuration(totalDuration) }}</span>
                </div>

                <div class="hidden lg:flex items-center gap-4 text-gray-600">
                    <BookOutlined
                        class="text-lg cursor-pointer transition-all hover:text-gray-900 hover:scale-110"
                        title="歌词"
                    />
                    <PlusOutlined
                        class="text-lg cursor-pointer transition-all hover:text-gray-900 hover:scale-110"
                        title="添加到歌单"
                    />
                </div>

                <div class="flex items-center gap-2">
                    <SoundOutlined class="text-lg text-gray-600 cursor-pointer transition-all hover:text-gray-900" />
                    <a-slider
                        :value="volume"
                        :max="100"
                        class="w-16 md:w-20 m-0"
                        @update:value="(val: number) => emit('update:volume', val)"
                    />
                </div>

                <MoreOutlined
                    class="text-xl text-gray-600 cursor-pointer transition-all hover:text-gray-900 hover:scale-110"
                />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import {
    HeartOutlined,
    MessageOutlined,
    RetweetOutlined,
    StepBackwardOutlined,
    StepForwardOutlined,
    PauseCircleFilled,
    PlayCircleFilled,
    UnorderedListOutlined,
    BookOutlined,
    PlusOutlined,
    SoundOutlined,
    MoreOutlined,
    CustomerServiceOutlined,
} from '@ant-design/icons-vue'
import type { Song, PlayMode } from './types'

// Props
const props = defineProps<{
    currentSong: Song | null
    isPlaying: boolean
    currentTime: number
    totalDuration: number
    volume: number
    playMode: PlayMode
}>()

// Emits
const emit = defineEmits<{
    (e: 'toggle-play'): void
    (e: 'previous'): void
    (e: 'next'): void
    (e: 'toggle-mode'): void
    (e: 'toggle-drawer'): void
    (e: 'toggle-lyrics'): void
    (e: 'update:volume', value: number): void
    (e: 'seek', time: number): void
}>()

// 封面加载状态
const coverLoaded = ref(false)

// 封面加载成功
const onCoverLoad = () => {
    coverLoaded.value = true
}

// 封面加载失败
const onCoverError = () => {
    coverLoaded.value = false
}

// 监听歌曲变化，重置封面加载状态
watch(
    () => props.currentSong,
    () => {
        coverLoaded.value = false
    },
)

// Computed
const progressPercentage = computed(() => {
    if (props.totalDuration === 0) return 0
    return (props.currentTime / props.totalDuration) * 100
})

// Methods
const formatDuration = (seconds: number) => {
    const min = Math.floor(seconds / 60)
    const sec = Math.floor(seconds % 60)
    return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
}

const onProgressBarClick = (event: MouseEvent) => {
    const target = event.currentTarget as HTMLElement
    const rect = target.getBoundingClientRect()
    const clickX = event.clientX - rect.left
    const percentage = (clickX / rect.width) * 100
    const newTime = (percentage / 100) * props.totalDuration

    emit('seek', newTime)
}

const onProgressHandleMouseDown = (event: MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()

    const progressBar = (event.currentTarget as HTMLElement).parentElement
    if (!progressBar) return

    const rect = progressBar.getBoundingClientRect()

    const onMouseMove = (moveEvent: MouseEvent) => {
        const moveX = moveEvent.clientX - rect.left
        const percentage = Math.max(0, Math.min(100, (moveX / rect.width) * 100))
        const newTime = (percentage / 100) * props.totalDuration

        emit('seek', newTime)
    }

    const onMouseUp = () => {
        document.removeEventListener('mousemove', onMouseMove)
        document.removeEventListener('mouseup', onMouseUp)
    }

    document.addEventListener('mousemove', onMouseMove)
    document.addEventListener('mouseup', onMouseUp)
}
</script>
